<template>
	<div class="box">
		<div class="center">
			<div class="xi">
				<div class="yuan">1</div>
				<div class="zhong">产品简介</div>
			</div>
			<!-- 区域 -->
			<div class="wine">
				<h4>A.&nbsp;咖啡</h4>
				<div class="small">
					({{ num }})&nbsp;&nbsp;{{ this.$route.query.id }}
				</div>
			</div>
			<div class="richText m-t-10" v-html="context"></div>
		</div>
	</div>
</template>
  
  <script>
import { getCoffeeProById } from '@/api/index'
export default {
	data() {
		return {
			num: sessionStorage.getItem("idx"),
			context: ''
		}
	},
	mounted() {
		getCoffeeProById({
			coffeeproId: this.$route.query.typeId
		}).then(res => {
			if (res.data.code == 200) {
				this.context = this.dataHTML(res.data.data.coffeeproText)
			}
		})
	},
	methods: {}
}

  </script>
  
  <style scoped>
.box {
	width: 100%;
	padding-bottom: 0.55rem;
	display: flex;
	justify-content: center;
	background-color: #f0eff5;
}
/* 版心区域 */
.center {
	width: 98%;
	margin: 0 1%;
	height: 100%;
}
.xi {
	width: 100%;
	margin-top: 0.05rem;
	display: flex;
}
.xi .yuan {
	width: 0.16rem;
	height: 0.16rem;
	margin-left: 0.1rem;
	font-weight: 700;
	text-align: center;
	line-height: 0.16rem;
	border-radius: 50%;
	margin-top: 0.05rem;
	border: 1px solid black;
}
.zhong {
	width: 95%;
	height: 100%;
	line-height: 0.3rem;
	padding-left: 5px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.wine {
	width: 100%;
}
h4 {
	width: 90%;
	padding-left: 0.2rem;
}
/* 小盒子区域 */
.small {
	width: 80%;
	height: 0.2rem;
	padding-left: 0.3rem;
	margin-top: 0.03rem;
}
</style>